<style>
    .head {
        display: flex;
        justify-content: space-between;
        height: 38px;
        line-height: 38px;
    }
</style>
<div class="layuimini-container">

    <div class="layuimini-main">
        <!-- 年级管理头部 -->
        <div class="head">
            <h2><strong>年级信息管理</strong></h2>
        </div>
        <!-- 分割线 -->
        <div>
            <hr class="layui-border-black">
        </div>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'miniPage', 'element'], function() {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        miniPage = layui.miniPage;
        table.render({
            elem: '#currentTableId',
            url: BasePath+'api/School/Grades',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [{
                    type: "checkbox",
                    width: 50
                }, {
                    field: 'id',
                    width: 80,
                    title: 'ID'
                }, {
                    field: 'display',
                    width: 80,
                    title: '年级名'
                }, {
                    title: '操作',
                    minWidth: 80,
                    toolbar: '#currentTableBar',
                    align: "center"
                }]
            ],
            // limits: [10, 15, 20, 25, 50, 100],
            // limit: 15,
            // page: true,
            skin: 'line'
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function(obj) {
            if (obj.event === 'add') {   // 监听添加操作
                var content = miniPage.getHrefContent('page/admin/grades_set/add.html');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '添加年级',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId'),
                    data = checkStatus.data;
                if (data.length === 0) {
                    layer.alert('未选择要删除的数据', {
                        title: '操作不合法'
                    });
                    return;
                }
                var deletedItemCount = 0;
                data.forEach(function(deleteData) {
                    if (deleteGrade(deleteData.id)) {
                        deletedItemCount++;
                    }
                });
                layer.alert('成功删除' + deletedItemCount + '个数据,' + (data.length - deletedItemCount) + '条删除失败，如果存在删除失败，请尝试刷新界面重试', {
                    title: '操作结果'
                });
                table.reload('currentTableId', {}, 'data');
                console.log(data)
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function(obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function(index) {
                    console.log(data)
                    deleteGrade(data.id);
                    layer.close(index);
                });
            }
        });

        function deleteGrade(gradeId) {
            var result=false;
            jq1111.ajax({
                type: "POST",
                async:false,
                crossDomain: true,
                url: BasePath+"api/School/RemoveGrade",
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify({
                    "gradeId": gradeId
                }),
                xhrFields: {
                    withCredentials: true
                },
                success: function(message) {
                    result = true;
                },
                error: function(message) {
                    console.log(message.responseJSON);
                    result = false;
                },
            });
            return result;
        }

    });
</script>